// 定义角色映射
const roleMap = {
	dev: '开发',
	test: '测试'
};

// 定义状态映射（颜色和文本）
const statusMap = {
	EFFECTIVE: {
		text: '在线',
		className: 'status-success'
	},
	INVALID: {
		text: '离线',
		className: 'status-error'
	}
};

// 定义接口地址
const API_URL = 'https://admin-feature.vbkrhk.com/auto-ai/vops/user/effective/userList';

// 缓存DOM元素
const tbody = document.querySelector('tbody');
const loader = document.querySelector('.loader'); // 缓存加载动画元素

// 渲染表格函数
function renderTable(data) {
	tbody.innerHTML = ''; // 清空现有内容

	data.forEach(item => {
		// 创建新的行
		const tr = document.createElement('tr');
		tr.setAttribute('data-uid', item.uid);       // 隐藏属性：uid
		tr.setAttribute('data-username', item.userName); // 隐藏属性：username
		tr.setAttribute('data-token', item.opsToken); // 隐藏属性：username

		// 工号（userName）
		const tdUserName = document.createElement('td');
		tdUserName.textContent = item.userName;
		tr.appendChild(tdUserName);

		// 名字（name）
		const tdName = document.createElement('td');
		tdName.textContent = item.name;
		tr.appendChild(tdName);

		// 角色（role）
		const tdRole = document.createElement('td');
		tdRole.textContent = roleMap[item.role] || item.role; // 映射角色
		tr.appendChild(tdRole);

		// 状态（opsTokenStatus）
		const tdStatus = document.createElement('td');
		const statusItem = statusMap[item.opsTokenStatus];
		if (statusItem) {
			// 创建状态指示器
			const indicator = document.createElement('span');
			indicator.className = `status-indicator ${statusItem.className}`;
			tdStatus.appendChild(indicator);
			tdStatus.appendChild(document.createTextNode(` ${statusItem.text}`));
		} else {
			tdStatus.textContent = item.opsTokenStatus;
		}
		tr.appendChild(tdStatus);

		// 更新时间（updateTime）
		const tdUpdateTime = document.createElement('td');
		tdUpdateTime.textContent = item.updateTime;
		tr.appendChild(tdUpdateTime);

		tbody.appendChild(tr);
	});
}

// 获取数据并渲染（带加载动画）
async function fetchData() {
	try {
		// 显示加载动画
		loader.style.display = 'block';

		const response = await fetch(API_URL);
		const result = await response.json();

		if (result.code === 0 && Array.isArray(result.data)) {
			renderTable(result.data);
		} else {
			console.error('接口返回数据格式错误:', result);
		}
	} catch (error) {
		console.error('请求失败:', error);
	} finally {
		// 无论成功或失败，最后隐藏加载动画
		loader.style.display = 'none';
	}
}

// 初始化：页面加载时执行
document.addEventListener('DOMContentLoaded', () => {
	// 首次加载数据
	fetchData();

	// 每 5 秒刷新一次（保持原有逻辑）
	setInterval(fetchData, 5000);
});
